<!DOCTYPE html>
<html lang="cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>设置图标</title>
    <link th:href="@{/frame/layui/css/layui.css}" rel="stylesheet">
</head>
<body>
<div class="layui-fluid">
    <table id="icontable" lay-filter="icontable"></table>
</div>
<div align="center" style="display: none" id="iii">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4">
            <label class="layui-form-label">后缀名：</label>
        </div>
        <div class="layui-col-md4 layui-col-md-offset1">
            <input class="layui-input" id="bindsuffix">
        </div>
    </div>
    <div style="margin-top: 10px">
        <button class="layui-btn" id="selectfile" type="button">选择图标</button>
        <div class="layui-upload-list" style="width: 100px;height: 100px">
            <img id="showimg" width="100%" height="100%">
        </div>
        <button class="layui-btn" id="doupload" type="button" style="display: none">添加图标</button>
    </div>
</div>
<script type="text/javascript" th:src="@{/frame/layui/layui.js}"></script>
<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="delAll">删除选中项</button>
        <button class="layui-btn layui-btn-sm" lay-event="addIcon">添加图标</button>
    </div>
</script>
<script id="showAvatar" type="text/html">
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="avartatPreview">查看图标</a>
</script>
<script id="barDemo" type="text/html">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table', 'upload'], function () {
        var table = layui.table;
        var upload = layui.upload;
        var $ = layui.$;
        table.render({
            // 绑定的table元素
            elem: '#icontable'
            // 异步数据接口
            , url: '[[@{/icon/admin/getIconList}]]'
            // 访问方式
            , method: 'post'
            // 分页切换时显示加载层
            , loading: true
            // 分页请求参数名
            , request: {
                pageName: 'index',
                limitName: 'pageSize'
            }
            // 开启分页
            , page: true
            , toolbar: '#toolbarDemo'
            , title: '文档图标列表'
            , cols: [ [
                {align: 'center', type: 'checkbox', fixed: 'left'},
                {align: 'center', field: 'suffix', title: '文档格式'},
                {align: 'center', field: 'url', title: '图标', templet: '#showAvatar'},
                {align: 'center', fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ] ]
        });

        // 行工具栏事件
        table.on('tool(icontable)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'del':
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                        $.post('[[@{/icon/admin/deleteIconItem}]]',{suffix:data.suffix},function (res) {
                            layer.msg('图标删除成功！',{icon:1,time:1000});
                        });
                    });
                    break;
                /*case 'edit':
                    layer.prompt({
                        formType: 2
                        , value: data.email
                    }, function (value, index) {
                        obj.update({
                            email: value
                        });
                        layer.close(index);
                    });
                    break;*/
                case 'avartatPreview':
                    layer.photos({photos: {title: "查看图标", data: [{src: '[[@{/picture/getIcon}]]?fileName='+data.url}]}, shade: .01, closeBtn: 1, anim: 5});
                    break;
            }
        });

        // 头工具栏事件
        table.on('toolbar(icontable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                // case 'getCheckData':
                //     var data = checkStatus.data;
                //     layer.alert(JSON.stringify(data));
                //     break;
                // case 'getCheckLength':
                //     var data = checkStatus.data;
                //     layer.msg('选中了：' + data.length + ' 个');
                //     break;
                // case 'isAll':
                //     layer.msg(checkStatus.isAll ? '全选' : '未全选');
                //     break;
                case 'addIcon':
                    layer.open({
                        type: 1,
                        content: $('#iii')
                    });
                    break;
                case 'delAll':
                    layer.confirm('真的删除行么', function (index) {
                        layer.close(index);
                        var data = checkStatus.data;
                        if(data.length===0){
                            layer.msg('请选中数据!',{icon:0,time:1000});
                        }else{
                            var suffixes=[];
                            for(var i=0;i<data.length;i++){
                                var item=data[i];
                                suffixes.push(item.suffix);
                            }
                            $.post('[[@{/icon/admin/delByBatch}]]',{suffixes:suffixes},function (res) {
                                layer.msg('图标删除成功！',{icon:1,time:1000});
                            });
                        }
                    });
                    break;
            }
        });

        upload.render({
            elem: '#selectfile'
            , url: '[[@{/icon/admin/uploadIcon}]]'
            , auto: false
            , bindAction: '#doupload'
            ,data:{
                inputsuffix:function () {
                    return $('#bindsuffix').val();
                }
            }
            , choose: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#showimg').attr('src', result);
                    $('#selectfile').hide();
                    $('#doupload').show();
                });
            }
            , done: function (res) {
                if(res.issuccess){
                    layer.msg('图标添加成功！',{icon:1,time:1000});
                }else{
                    layer.msg('图标添加失败！',{icon:2,time:1000});
                }
            }
        });
    });
</script>
</body>
</html>